<template>
  <div class="updateModal">
    <a-modal :visible="setRoleModal" title="设置角色权限" @cancel="cancel" @ok="updateInfo">
      <div>
        <label :style="{width: '50px',marginRight: '10px'}">角色:</label>
        <a-input v-model="curRoleNameShow" :style="{width: '50%',marginBottom: '10px'}" />
      </div>
      <a-card size="small" title="按钮权限" :style="{marginBottom: '10px'}">
        <div :style="{ borderBottom: '1px solid #E9E9E9' }">
          <a-checkbox
            :indeterminate="indeterminate"
            :checked="checkAll"
            @change="onCheckAllChange"
          >全选</a-checkbox>
        </div>
        <br />
        <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
      </a-card>
      <a-card size="small" title="菜单权限">
        <a-tree
          v-model="checkedKeys"
          checkable
          :defaultExpandAll="defaultExpandAll"
          :selected-keys="selectedKeys"
          :tree-data="treeData"
          @check="onCheck"
        />
      </a-card>
    </a-modal>
  </div>
</template>

<script>
import { menuList } from '@/config/menuConfig.js'
import { setRole } from '@/network/role.js'
export default {
  name: '',
  props: {
    curRoleMenuAuth: {
      type: Array,
      default: () => {
        return []
      }
    },
    curRoleBtnAuth: {
      type: Array,
      default: () => {
        return []
      }
    },
    curRoleName: {
      type: String,
      default: () => {
        return ''
      }
    },
    curRoleId: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      setRoleModal: false,
      labelCol: {
        span: 6
      },
      wrapperCol: {
        span: 15
      },
      destory: true,
      curRoleNameShow: '',
      curRoleIdShow: '',
      checkedKeys: [],  //保存新的勾选的选项,保存当前已有的权限，并显示在页面上，初始化时在对应的复选框勾选
      defaultExpandAll: true, //默认展开所有树节点
      selectedKeys: [],  //保存当前已有的权限，并显示在页面上，初始化时在对应的复选框勾选
      treeData: [], //生成菜单权限目录的数组
      indeterminate: this.checkedList ? false : true,  //设置 indeterminate 状态，只负责样式控制，false代表不选中，true代表勾选
      checkAll: false,  //指定当前是否选中
      //plainOptions: ['增加add', '删除(delete)', '查看(edit)', '修改(edit)'], //指定可选项
      plainOptions: [
        {
          label: '增加',
          value: 'add'
        },
        {
          label: '删除',
          value: 'delete'
        },
        {
          label: '查看',
          value: 'view'
        },
        {
          label: '修改',
          value: 'edit'
        },
      ], //指定可选项
      checkedList: [],  //保存被选中的项
    };
  },
  computed: {

  },
  watch: {
    curRoleMenuAuth (val) {
      this.checkedKeys = val
    },
    curRoleBtnAuth (val) {
      this.checkedList = val
    },
    curRoleName (val) {
      this.curRoleNameShow = val
    },
    curRoleId (val) {
      this.curRoleIdShow = val
    }
  },
  created () {
    this.setMenu()
  },
  methods: {
    //关闭modal
    cancel () {
      this.setRoleModal = false
    },
    //打开modal
    show () {
      this.setRoleModal = true
    },
    //确认的回调
    updateInfo () {
      let authMenuArr = []
      //遍历选中的menu，依次将其添加到一个数组
      for (let item of this.checkedKeys) {
        console.log(item)
        authMenuArr.push(item)
      }
      console.log(authMenuArr)
      const newRoleInfos = {
        name: this.curRoleNameShow,
        id: this.curRoleIdShow,
        menus: this.checkedKeys,
        rights: this.checkedList
      }
      console.log(newRoleInfos)
      setRole(newRoleInfos).then(res => {
        console.log(res)
        if (res.data.status == 200) {
          this.$message.success(res.data.msg)
          this.cancel()
          this.$emit('refreshRoleTable')
        }
      })
    },
    //设置权限的菜单权限目录
    setMenu () {
      let saveItem = []
      for (let item of menuList) {
        saveItem.push(item)
      }
      this.treeData = [
        {
          title: '系统权限',
          key: '-1',
          children: saveItem
        }
      ]
    },
    //选择树形组件的复选框触发时的回调
    onCheck (checkedKeys, event) {
      console.log(event)
      // for (let item of event.halfCheckedKeys) {
      //   checkedKeys.push(item)
      // }
      console.log('onCheck', checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    //勾选状态变化时回调函数
    onChange (checkedList) {
      this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length;
      this.checkAll = this.checkedList.length === this.plainOptions.length;
      console.log(checkedList)
    },
    //全选的方法
    onCheckAllChange (e) {
      console.log(e)
      let saveAllChecked = []
      //被选中的列表，如果全选就是this.plainOptions，否则就是[]
      if (e.target.checked == true) {  //如果点了全选
        for (let item of this.plainOptions) {
          saveAllChecked.push(item.value)
        }
        this.checkedList = saveAllChecked
      } else {
        this.checkedList = []
      }
      this.indeterminate = false
      this.checkAll = e.target.checked
      console.log(this.checkedList)
    },
  },
  components: {

  },
};
</script>

<style scoped>
</style>
